<template>
  <div p="t20px b20px l200px r200px" flex>
    <div flex-1 flex justify-start>
      <n-steps w300px vertical :current="current" :status="'process'">
        <n-step title="填写转账信息" />
        <n-step title="确认转账信息" />
        <n-step title="完成" />
      </n-steps>
      <div flex-1>
        <Step1 v-if="current == 1" @nextStep="nextStep"></Step1>
        <Step2 v-if="current == 2" @nextStep="nextStep" @prevStep="prevStep"></Step2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'
const Step1 = defineAsyncComponent(() => import('@/views/examples/steps/components/step-1.vue'))
const Step2 = defineAsyncComponent(() => import('@/views/examples/steps/components/step-2.vue'))
let current = ref(1)
const nextStep = () => {
  const $$current = current.value
  $$current < 3 ? (current.value += 1) : null
}
const prevStep = () => {
  const $$current = current.value
  $$current > 1 ? (current.value -= 1) : null
}
</script>

<style scoped></style>
